<template>
    <div class="vip-add plr15 pt15" >
        <template v-if="type!=-1">
        <div class="bgc-fff vip-info c-000 plr12" v-if="id">
            <div class="fs-12 row bb-d2d2d2 pt15 pb14 f-bold">共享酒店会员订单</div>
            <div class="c-111 fs-15 row bb-d2d2d2 pt15 pb14">{{card.name}}</div>
            <div class="fs-15 c-111 row pt22 pb22">实付总额：<span class="c-c9994a">¥{{card.price}}</span></div>
        </div>

        <div :class="{mt15: id}" class="bgc-fff plr12 vip-info c-000 ">
            <div v-if="id" class="fs-12  row bb-d2d2d2 pt15 pb14 f-bold">购卡支付成功后，即刻计算有效期</div>
            <template v-else="">
                <div  class="fs-12  row bb-d2d2d2 pt15 pb14 f-bold">绑定实体卡即算激活激活卡片后，会员有效期开始计算。</div>
                <van-field
                    label="卡号"
                    placeholder="请输入卡号"
                    :border="false"
                    v-on:change="cardIpt"
                    />
                <div class="line"></div>
                <van-field
                    label="卡片密码"
                    placeholder="请输入卡片密码"
                    :border="false"
                    v-on:change="pwdIpt"
                    />
                <div class="line"></div>
            </template>
            
            <van-field
                label="姓名"
                placeholder="请输入用户名"
                :border="false"
                v-on:change="nameIpt"
                />
            <div class="line"></div>
            <van-cell title="姓别"  title-width="90px">
                <div >
                    <van-radio-group v-on:change="sexChange" :value="form.sex" >
                        <van-radio icon-size="14px" checked-color="#cda058" name="男">男</van-radio>
                        <van-radio icon-size="14px" class="ml20" checked-color="#cda058" name="女">女</van-radio>
                    </van-radio-group>
                </div>
            </van-cell>
            <div class="line"></div>
            <van-field
                label="身份证号"
                placeholder="请输入您的身份证号码"
                :border="false"
                v-on:change="idcardChange"
                />
        </div>
        <div class="bgc-fff plr12 vip-info c-000 mt15">
            <!-- <div class="fs-12  row bb-d2d2d2 pt15 pb14 f-bold">购卡支付成功后，即刻计算有效期</div> -->
             <van-field
                label="手机号码"
                placeholder="请输入手机号码"
                :border="false"
                v-on:change="mobileChange"
                />
            <div class="line"></div>
            <van-field
                label="验证码"
                placeholder="请输入验证码"
                :border="false"
                v-on:change="codeChange"
                >
                <van-button @click="SendVertifyCode" :disabled="time!=0" color="#281714" slot="button" size="small" type="primary">
                    发送验证码<template v-if="time!=0">(<van-count-down v-on:finish="finish" :format="format" :time="time" />s)</template>
                </van-button>
            </van-field>
        </div>
        <div class="mt10">
            <van-radio-group :value="checkXy" v-on:change="checkChange">
                <van-radio  icon-size="14px" checked-color="#cda058" name="1">
                    <span class="c-9a9a9a fs-12" @click.stop="link('/vip/hyxy')">我已阅读并同意《共享酒店会员协议》</span>
                </van-radio>
            </van-radio-group>
        </div>
        <div class="mt22 pb20">
            <van-button @click="validate" type="primary" color="#c59d5d" block>确定</van-button>
        </div>
        </template>
    </div>
</template>

<script>
import cardSuitApi from "@/api/api-cardSuit";
import cardApi from "@/api/api-card";
import SMSApi from "@/api/api-SMS";
import ValidatorUtils from '@/plugins/utils/validator'
export default {
    name: "orderDetail",
    components: {

    },
    data(){
        return {
            id: "",
            card: "",
            checkXy: "",
            form:{
                name: "",
                sex: "男",
                idCard: "",
                mobile: "",
                code: "",
                card: "",
                pwd: ""
            },
            time: 0,
            format: "ss",
            type: -1
        }
    },
    onLoad(option){   
        this.id = option.id || ""
        this.type = 1
        wx.setNavigationBarTitle({
            title: this.id? "购买会员": "绑定卡片"
        })
    },
    mounted() {
        this.GetCardSuit()
    },
    methods: {
        GetCardSuit(){
            cardSuitApi.GetCardSuit({
                suitId: this.id
            }).then(res => {
                res.result.price = res.result.price.toFixed(2)
                this.card = res.result
            })
        },
        SendVertifyCode(){
            if(this.time!=0){
                return
            }
            if(!ValidatorUtils.isMobile(this.form.mobile)){
                wx.showToast({
                    title: '请输入正确的手机号码',
                    icon: "none",
                    duration: 2000
                })
                return
            }
            SMSApi.SendVertifyCode({
                mobile: this.form.mobile,
                messageType: 7
            }).then(res => {
                if(res.code == 0){
                    this.time = 60 * 1000
                    wx.showToast({
                        title: "发送成功",
                        duration: 2000
                    })
                } else {
                    // wx.showToast({
                    //     title: res.msg,
                    //     duration: 2000
                    // })
                }
            })
        },
        nameIpt(e){
            this.form.name = e.mp.detail
        },
        pwdIpt(e){
            this.form.pwd = e.mp.detail
        },
        cardIpt(e){
            this.form.card = e.mp.detail
        },
        idcardChange(e){
            this.form.idCard = e.mp.detail
        },
        mobileChange(e){
            this.form.mobile = e.mp.detail
        },
        codeChange(e){
            this.form.code = e.mp.detail
        },
        checkChange(e){
            this.checkXy = e.mp.detail
        },
        sexChange(e){
            this.form.sex = e.mp.detail
        },
        showToast(msg, icon){
            wx.showToast({
                title: msg,
                icon: icon || "none",
                duration: 2000
            })
        },
        timerFinish(){
            this.time = 0
        },
        validate() {
            if(!this.id){
                if(!this.form.card){
                    this.showToast('请输入卡号')
                    return
                }
                if(!this.form.pwd){
                    this.showToast('请输入卡片密码')
                    return
                }
            }
            if(!ValidatorUtils.isLenRange(this.form.name, [1, 15])){
                this.showToast('姓名长度在1到15个字符')
                return
            }
            if(!ValidatorUtils.isIdcard(this.form.idCard, [1, 30])){
                this.showToast('请输入正确的身份证号')
                return
            }
            
            if(!ValidatorUtils.isMobile(this.form.mobile)){
                this.showToast('请输入正确的手机号码')
                return
            }
            
            if(!this.form.code){
                this.showToast('请输入手机验证码')
                return
            }
            if(this.checkXy != 1){
                this.showToast('请查阅并同意协议')
                return
            }
            this.submit()
        },
        submit(){
            if(this.id){
                cardApi.BuyCard({
                    suitId: this.id,
                    name: this.form.name,
                    sex: this.form.sex=="男" ? 1 : 2,
                    idcard: this.form.idCard,
                    mobile: this.form.mobile,
                    code: this.form.code
                }).then(res => {
                    if(res.code == 0){
                        this.pay(res.result)
                    } 
                })
            } else {
                cardApi.ActiveCard({
                    number: this.form.card,
                    password: this.form.pwd,
                    name: this.form.name,
                    sex: this.form.sex=="男" ? 1 : 2,
                    idcard: this.form.idCard,
                    mobile: this.form.mobile,
                    code: this.form.code
                }).then(res => {
                    if(res.code == 0){
                        wx.showToast({
                            title: '激活成功',
                            icon: 'success',
                            duration: 2000
                        })
                        setTimeout(()=>{
                            this.link('/personal/myCard')
                        }, 2000)
                    } 
                })
            }
        },
        pay(res){
            var vm = this
            wx.requestPayment({
                timeStamp: res.timeStamp,
                nonceStr: res.nonceStr,
                package: res.package,
                signType: res.signType,
                paySign: res.paySign,
                success (data) { 
                    wx.showToast({
                        title: '支付成功',
                        icon: 'success',
                        duration: 2000
                    })
                    
                    setTimeout(function(){
                        vm.link('/personal/myCard')
                    }, 2000)
                },
                fail (res) { 
                    wx.showToast({
                        title: '支付失败',
                        icon: 'none',
                        duration: 2000
                    })
                }
            })
        },
        finish(){
            this.time = 0
        }
    }
};
</script>
<style lang="scss" scope>
@import './css/add.scss';
</style>
